<template>
    <div class="my-tasks">
        <el-row>
            <el-col :span="2"><div class="title">我的任务</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-radio-group v-model="activeTab" size="small">
                    <el-radio-button label="待处理">待处理</el-radio-button>
                    <el-radio-button label="已结束">已结束</el-radio-button>
                    <el-radio-button label="所有任务">所有任务</el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
        <el-divider style="margin: 0"/>
        <el-table :data="tabData" ref="tableRef" size="small">
            <el-table-column label="流程名称" prop="processDefinitionName"/>
            <el-table-column label="任务名称" prop="taskName"/>
            <el-table-column label="任务开始时间" prop="createTime"/>
            <el-table-column label="已过时间" v-if="this.activeTab==='待处理'">
                <template #default="s">
                    {{timePass(s.row.createTime)}}
                </template>
            </el-table-column>
            <el-table-column label="用时" v-if="this.activeTab==='已结束'" show-overflow-tooltip>
                <template #default="s">
                    {{this.$utils.getDuration(s.row.durationMillisecond)}}
                </template>
            </el-table-column>
            <el-table-column label="是否结束" width="90px">
                <template #default="s">
                    <el-tag type="success" v-if="s.row.isEnd">已结束</el-tag>
                    <el-tag type="warning" v-else>待办</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140px">
                <template #default="s">
                    <el-button size="small" v-if="!s.row.isEnd" @click="handleClick(s.row)">立即处理</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {getMyTasks} from "../../../network/process/flowable-general";

export default {
    name: "MyTasks",
    data(){
        return{
            activeTab: '待处理',
            myTasks: [],
        }
    },
    methods: {
        handleClick(row){
            console.log('row',row);
            if(row.processDefinitionName==='出差申请流程'){
                // console.log('跳转出差');
                this.$router.push('/process/evection-apply/accreditation' + '?returnUrl=' + this.$route.path + '&taskId=' + row.taskId);
            }else if(row.processDefinitionName==='请假申请流程'){

            }
        },
        loadMyTasks(){
            let userId = this.$store.state.loginUser.id;
            getMyTasks(userId).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                         this.myTasks = vo.data;
                    },
                    log: '我的任务集合'
                })
            })
        },
        timePass(t) {
            return this.$utils.getDurationStr({
                ms: new Date().getTime() - new Date(t).getTime(),
                d: true,
                h: true,
                m: true
            });
        }
    },
    computed:{
        tabData(){
            return this.myTasks.filter(item=>{
                // console.log('this.activeTab',this.activeTab)
                if(this.activeTab==='待处理'){
                    return !item.isEnd;
                }
                if(this.activeTab==='已结束'){
                    return item.isEnd;
                }
                return item;
            })
        }
    },
    created() {
        this.loadMyTasks();
    },
    watch: {
        '$store.state.loginUser.id'(){
            this.loadMyTasks();
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}

.my-tasks{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: white;
}
.title{
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    text-indent: 4px;
}
</style>